<template>
    <div class="container">
        <Navbars ></Navbars>
        
        <!-- 表格 -->
        <div class="mt15">
        <el-card class="tab-card" shadow="never">
            <div slot="header" class="spacebetween disflex align-center">
            <span style="color:#676a6f;font-size:14px">成员管理列表</span>
            <div>
                <el-button class="btn btncolor" icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
            </div>
            </div>
            <el-table :data="tableData" :header-cell-style="{background:'#e4ebfd',color:'#76100db'}" :row-class-name="tableRowClassName"
                default-expand-all row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="userId"  label="用户" width="180">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.userId" placeholder="请选择">
                            <el-option
                            v-for="item in userlist"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="姓名" ></el-table-column>
                <el-table-column prop="flag" label="身份标识">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.flag" placeholder="请选择">
                            <el-option
                            v-for="item in statuslist"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column align="center" fixed="right"  label="操作">
                <template slot-scope="scope">
                    <el-button type="text"  class="edit" @click="handlEdit(scope.row)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handleDel(scope.row)" class="del">删除</el-button>
                </template>
                </el-table-column>
                </el-table>
            </el-card>
            <!--分页 -->
            <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num"></Pagination>
        </div>
        <!-- 新增修改 -->
        <el-dialog :title="title" :visible.sync="isvisible" width="40%" :close-on-click-modal="false">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
                <el-form-item label="用户">
                    <el-select v-model="addForm.userId" placeholder="请选择">
                        <el-option
                        v-for="item in userlist"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份表示" prop="icdName">
                    <el-select v-model="addForm.flag" placeholder="请选择">
                        <el-option
                        v-for="item in statuslist"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitAdd('addForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">确定</el-button>
                    <el-button @click="isvisible = false" size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { dicttype } from "@/api/role.js";
import { userPage,} from '@/api/user.js'
import {meruserlist,meruserdel,meruserupdate,meruseradd} from '@/api/manager.js'
export default {
    components: { Pagination },
    data() {
        return {
            tableData: [],
            options: [],
            userlist:[],
            listLoading:false,
            listQuery:{
                page:1,
                num:10,
                projectId:this.$route.query.id,
            },
            statuslist:[],
            total:0,
            isvisible:false,
            addForm:{},
            title:"新增成员",
            loading:false,
            addRules:{}
        }
    },
    created(){
        this.getDIctyp()
        this.getList()
        this.getuserList()
    },
    methods:{
        // 设置表格颜色
        tableRowClassName({row, rowIndex}) {
            if (rowIndex%2==0) { return 'warning-row'}
            return '';
        },
        // 获取状态字典
        getDIctyp(){
            this.$getFlag().then(obj=>{
                dicttype({type:'project_user_flag'},obj.data).then(res=>{
                    if(res.status == 200){
                        this.statuslist = res.data
                        // this.addForm.status = res.data[0].code
                    }
                })
            })
        },
        getList(){
            this.$getFlag().then(obj=>{
                this.listLoading = false
                meruserlist(this.listQuery,obj.data).then(response => {
                    this.tableData = response.list
                    this.total = Number(response.total)
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            })
        },
        // 获取用户列表表信息
        getuserList() {
            let data = {
                orgId:'',
                username:'',
                page: 1,
                num: 20
            }
            this.$getFlag().then(obj=>{
                userPage(data,obj.data).then(response => {
                    this.userlist = response.list
                })
            })
        },
        handleAdd(){
            // this.tableData.push({userId:'',name:'',flag:''})
            this.title = "新增成员"
            this.addForm = {}
            this.isvisible = true
        },
        handlEdit(item){
            this.title = "编辑成员"
            this.addForm = item
            this.isvisible = true
        },
        handleDel(item){
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$getFlag().then(obj=>{
                    meruserdel({id:item.id,name:item.name},obj.data).then(res=>{
                        if(res.status == 200){
                            this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                            this.getList()
                        }else{
                            this.$notify({ title: "操作失败",message: res.msg, type: "error", duration: 2000,});
                        }
                    })
                }) 
            })
            .catch(() => {});
        },
        onSubmitAdd(formName){
            this.addForm.projectId = this.$route.query.id,
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.title=='新增成员'){
                        this.$getFlag().then(obj=>{
                            meruseradd(this.addForm,obj.data).then(res=>{
                                if(res.status == 200){
                                    this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                                    this.getList()
                                    this.isvisible = false
                                }else{
                                    this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                                }
                            })
                        })
                    }else{
                        this.$getFlag().then(obj=>{
                            meruserupdate(this.addForm,obj.data).then(res=>{
                                if(res.status == 200){
                                    this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                                    this.getList()
                                    this.isvisible = false
                                }else{
                                this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                                }
                            })
                        })
                    } 
                }else{
                    this.$notify({ title: "操作失败",message: '请完成必填项！', type: "error", duration: 2000,});
                }
            })
        }
    }
}
</script>
<style>
  .el-table .warning-row {
    background-color: '#f6f10fe';
  }
</style>